<template>
	<view class="index">
		<view class="header">
			<view :class="{active: isActive}" @click="init">找寻中</view>
			<view :class="{active: isActive == false}" @click="station">区域</view>
			<view v-if="isActive" class="icon" @click="filter">
				<image src="../../../static/index/filter.png"></image>
			</view>
		</view>
		<view class="seekList" v-if="isActive">
			<SeekItem v-for="(item, i) in lostData" :key="i" :info="item"></SeekItem>
		</view>
		<view class="stationList" v-else>
			<view class="station" v-for="(item, i) in lostData" :key="i" @click="getStationLost(item.id)">
				<view class="name">站点名：{{item.name}}</view>
				<view class="leader">负责人：{{item.leader}}</view>
				<view class="phone">联系电话：{{item.phone}}</view>
				<view class="place">地址：{{item.place}}</view>
				<view class="lost">查看该区遗失人员</view>
			</view>
		</view>
		<view v-if="!lostData.length" class="empty">
			查找到0条记录
		</view>
	</view>
</template>

<script>
	import SeekItem from './components/SeekItem.vue'
	import {
		IP
	} from '../../../network/requestUrl.js'
	import {
		getPersonLostList,
		getStationList,
		getLostByStationId
	} from '../../../network/home.js'
	export default {
		components: {
			SeekItem
		},
		data() {
			return {
				isActive: true,
				lostData: [],
				container: [],
				isFilter: false
			};
		},
		onLoad() {
			uni.startPullDownRefresh()
		},
		onShow() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			async init() {
				this.isActive = true
				this.isFilter = false
				const result = await getPersonLostList()
				// console.log(result)
				uni.stopPullDownRefresh()

				if (!result.flag) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
					return
				}

				this.lostData = result.data
					.filter(item => item.status == 0)
					.map(item => {
						item.url = item.url ? IP + item.url : "http://p9.qhimg.com/bdm/2560_1600_0/t0182a415e4ad02be3b.jpg";
						return item
					});
				this.container = this.lostData
			},

			async station() {
				this.isActive = false;
				const result = await getStationList()
				console.log(result)
				if (!result.flag) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
					return
				}
				this.lostData = result.data.slice()
			},

			async getStationLost(id) {
				const result = await getLostByStationId(id)
				console.log(result)
				if (!result.flag) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
					return
				}
				if (result.data.length <= 0) {
					uni.showToast({
						title: '该区没有遗失人员',
						icon: 'none'
					})
					return
				};

				this.isActive = true;
				this.lostData = result.data.map(item => {
					item.url = item.url ? IP + item.url : "http://p9.qhimg.com/bdm/2560_1600_0/t0182a415e4ad02be3b.jpg";
					return item
				})
			},

			filter() {
				uni.showActionSheet({
					itemList: ['按性别', '按时间', '按年龄'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								return void this.filterOfSex();
							case 1:
								return void this.filterOfTime();
							case 2:
								return void this.filterOfAge();
						}
					}
				})
			},

			filterOfSex() {
				setTimeout(() => {
					uni.showActionSheet({
						itemList: ['男', '女'],
						success: (res) => {
							const index = res.tapIndex;
							this.filterLostData(item => {
								if (index == 0) return item.sex == '男'
								if (index == 1) return item.sex == '女'
							})
						}
					})
				}, 4)
			},
			filterOfTime() {
				setTimeout(() => {
					uni.showActionSheet({
						itemList: ['近三天', '一个星期内', '一个月内', '一个月前'],
						success: (res) => {
							const index = res.tapIndex;
							const nowDate = new Date().getDate()
							this.filterLostData(item => {
								const lostDate = (new Date(item.lost_time)).getDate();
								if (index == 0) return nowDate - lostDate <= 3
								if (index == 1) return nowDate - lostDate <= 7
								if (index == 2) return nowDate - lostDate <= 30
								if (index == 3) return nowDate - lostDate > 30
							})
						}
					})
				}, 4)
			},
			filterOfAge() {
				setTimeout(() => {
					uni.showActionSheet({
						itemList: ['60岁以下', '60岁——65岁', '66岁——70岁', '70岁以上'],
						success: (res) => {
							const index = res.tapIndex;
							this.filterLostData(item => {
								if (index == 0) return item.age < 60
								if (index == 1) return item.age >= 60 && item.age <= 65
								if (index == 2) return item.age >= 66 && item.age <= 70
								if (index == 3) return item.age > 70
							})
						}
					})
				}, 4)
			},
			filterLostData(handler) {
				let lostData;
				if (!this.isFilter) {
					lostData = this.lostData
				} else {
					lostData = this.container
				}
				this.lostData = lostData.filter(handler)
				uni.showToast({
					title: `共查找到${this.lostData.length}条记录`,
					icon: 'none'
				})
				this.isFilter = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: #F2F2F2;

		.header {
			padding: 10px 20px;
			display: flex;
			justify-content: space-around;
			background-color: white;
			position: relative;

			.active {
				font-weight: bold;
				border-bottom: 1.5px solid orange;
			}

			view {
				padding: 0 10px 10px;
			}

			.icon {
				position: absolute;
				right: 0;

				// top: auto;
				// bottom: auto;
				image {
					width: 22px;
					height: 22px;
				}
			}
		}

		.seekList {
			// padding: 10px;
		}

		.stationList {
			.station {
				background-color: white;
				margin: 10px 0;
				padding: 10px;

				view {
					margin: 5px 0;
				}

				.lost {
					margin-top: 10px;
					font-size: 12px;
					color: #1CBAB6;
					text-align: center;
				}
			}
		}

		.empty {
			background-color: white;
			padding-top: 20px;
			text-align: center;
		}
	}
</style>
